<template>
    <div class="dialogBox">
        <el-dialog :title="dialogTitle" :visible.sync="appendDialog" :before-close="cencelSend" width="50%" center>
            <el-form ref="AddRobotData" :rules="rules" :model="AddRobotData" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机器人编号:" prop="robotNo">
                            <el-input v-model="AddRobotData.robotNo" placeholder="请输入机器人编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机器人名称:" prop="robotName">
                            <el-input v-model="AddRobotData.robotName" placeholder="请输入机器人名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="底盘地址IP1:" prop="webUrl">
                            <el-input v-model="AddRobotData.webUrl" placeholder="请输入通讯地址1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="底盘地址IP2:" prop="apiUrl">
                            <el-input v-model="AddRobotData.apiUrl" placeholder="请输入通讯地址2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机械臂Ip:" prop="handIP">
                            <el-input v-model="AddRobotData.handIP" placeholder="请输入机械臂Ip"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头IP:" prop="camIP">
                            <el-input v-model="AddRobotData.camIP" placeholder="请输入摄像头IP"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="后端处理IP:" prop="backDealIP">
                            <el-input v-model="AddRobotData.backDealIP" placeholder="请输入后端处理IP"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="btn1" @click="cencelSend('ruleForm')">取 消</el-button>
                <el-button class="btn2" @click="addRobot('AddRobotData')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addRobot, editRobot } from '@/api/cyRobot/robot'
export default {
    props: ['dialogTitle', 'appendDialogVisible', 'formData'],
    name: 'AddAndEdit',
    data() {
        return {
            //新增or修改按钮
            appendDialog: false,
            //新增数据初始化
            AddRobotData: {
                id: '',
                robotNo: '',
                robotName: '',
                webUrl: '',
                apiUrl: '',
                handIP: '',
                camIP: '',
                backDealIP: ''
            },
            rules: {
                robotNo: [
                    { required: true, message: '请输入机器人编号', trigger: 'blur' },
                ],
                robotName: [
                    { required: true, message: '请输入机器人名称', trigger: 'blur' },
                    { validator: this.checkUnique, trigger: 'blur' }
                ],
            }

        };
    },
    methods: {
        //自定义校验规则检验机器人名称和机器人编号师傅相等
        checkUnique(rule, value, callback) {
            if (this.AddRobotData.robotNo === value) {
                callback(new Error('机器人名称和机器人编号不能相同'));
            } else {
                callback();
            }
        },
        // 取消  
        cencelSend(ruleForm) {
            this.$refs.AddRobotData.resetFields(); // 清除表单数据
            this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
        },
        //增加
        addRobot(AddRobotData) {
            // 先进行表单校验
            this.$refs[AddRobotData].validate((valid) => {
                //校验通过在新增
                if (valid) {
                    //根据有无ID进行修改或编辑有ID为编辑
                    if (this.AddRobotData.id) {
                        editRobot(this.AddRobotData).then(response => {
                            if (response.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                this.$emit('updataList',)//触发父组件里的更新数据方法
                                this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
                            }
                        })
                    } else {
                        // 没有ID则为新增
                        addRobot(this.AddRobotData).then(response => {
                            if (response.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                });
                                this.$emit('updataList',)//触发父组件里的更新数据方法
                                this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
                            }
                        })

                    }

                } else {

                    return false;
                }
            });

        },

        //修改操作
        Edithandle(index, row) {

            console.log('88888888888888', row)
            this.editDialogVisible = true
        }
    },
    watch: {
        //监听父组件传过来的表单数据
        formData(newValue, oldValue) {
            //如果有值结构出newValue里的所有值给到AddRobotData
            this.AddRobotData = { ...newValue }

        },
        //监听父组件传过来的表单数据
        appendDialogVisible(newValue, oldValue) {
            this.appendDialog = newValue

        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 15vh !important;
}

.dialogBox {
    ::v-deep .el-dialog__header {
        background-color: #123150;
        color: #ffff;
    }

    ::v-deep .el-dialog__title {
        color: #ffff;
    }

    ::v-deep .el-dialog__body {
        background-color: #123150;
    }

    ::v-deep .el-dialog__footer {
        background-color: #123150;
    }

    ::v-deep .el-input__inner {
        background-color: #123150;
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        width: 100px !important;
    }

    ::v-deep .el-input__inner {
        margin-bottom: 18px;
    }

    ::v-deep .el-input__inner {
        border-color: #1560AC;
    }

    .dialog-footer {
        display: flex;
        justify-content: center;

        .btn1 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
            margin-right: 10%;
        }

        .btn2 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
        }

        ::v-deep .el-button--default {
            background-color: #123150;
        }

        ::v-deep .el-button--default:hover {
            background-color: #F0F0F0;
        }

        ::v-deep .el-button--default {
            color: #E1E2E5;
        }

        ::v-deep .el-button--default:hover {
            color: #142150;
        }
    }
}
</style>